@charset "utf-8";
body {color: #333;}
html, body, ul { margin:0; padding:0; font:12px/1.5 "Microsoft Yahei",tahoma, arial;}
ul, li { list-style:none; }
a { text-decoration:none;outline:none; }
.clear {clear:both;}
[v-cloak] { display: none }

/**桌类型选择**/
.user-body{height: 100%}
.book-ctx{width: 1200px; }
.user-wrp{width: 100%; height: 100%; overflow: auto;}
.seat-type-ctl {width: 448px; margin: 0 auto;margin-top: 10px; margin-bottom: 10px;}
.seat-type-ctl.user {width: 615px; margin: 0 auto;margin-top: 10px; margin-bottom: 10px;}
.seat-type-ctl li{cursor: pointer;float: left;padding: 0 15px;margin: 0 10px;height: 20px; line-height: 20px;border-radius: 10px;}
.seat-type-ctl li.cur{background-color: #ccc;}
.seat-type-ctl li span{display: inline-block;}
.seat-type-ctl li span.single{width: 6px; height: 6px; border-radius: 50%; background-color: red;vertical-align: middle;}
.seat-type-ctl li span.double-c{width: 6px; height: 6px; border-radius: 50%; background-color: orange;vertical-align: middle;}
.seat-type-ctl li span.double-r{width: 6px; height: 6px; border-radius: 50%; background-color: orange;vertical-align: middle;}
.seat-type-ctl li span.quadra{width: 6px; height: 6px; border-radius: 50%; background-color: blue;vertical-align: middle;}
.seat-type-ctl li span.selled{width: 6px; height: 6px; border-radius: 50%; background-color: #ccc;vertical-align: middle;}
.seat-type-ctl li span.picked{width: 6px; height: 6px; border-radius: 50%; background-color: green;vertical-align: middle;}
.line-input{margin-top: 10px; margin-bottom: 10px;text-align: center;}
.line-input span {display: inline-block;}
.line-input span input{width: 60px; height: 30px; border: 1px solid #e6e6e6; border-radius: 4px;padding: 0 6px;outline: none;}
.x-icon{padding: 0 10px;}
.seat-list{text-align: center;}
.seat-list .row-line{height: 22px;margin-top: 5px;}
.seat-list .row-line:first-child{margin-top: 0px;}
.seat-list .row-line .col-line{cursor: pointer;margin-left: 5px;display: inline-block;width: 20px; height: 20px;border-radius: 4px; border: 1px solid #ccc;}
.seat-list.user .row-line .col-line.booked{background-color: #ccc!important;cursor: not-allowed;}
.seat-list.shop .row-line .col-line.booked{border: 1px solid red;}
.seat-list .row-line .col-line.picked.single {background-color: red;}
.seat-list .row-line .col-line.picked.double-c {background-color: orange;}
.seat-list .row-line .col-line.picked.double-r {background-color: orange;}
.seat-list .row-line .col-line.picked.quadra {background-color: blue;}
.seat-list .row-line .col-line.picked.hover{background-color: #999;}
.seat-list .row-line .col-line.sbooked{background-color: green!important;}
.seat-list .row-line .col-line.hover.single {background-color: red;}
.seat-list .row-line .col-line.hover.double-c {background-color: orange;}
.seat-list .row-line .col-line.hover.double-r {background-color: orange;}
.seat-list .row-line .col-line.hover.quadra {background-color: blue;}
.seat-list .row-line .col-line:first-child{margin-left: 0px;}
.ctl-btn{text-align: center; margin: 20px 0;}
.ctl-btn li{display: inline-block; margin-left: 10px;}
.ctl-btn li:first-child{margin-left: 0;}
.ctl-btn li button{height: 30px; padding: 0 10px;}

